<template>
  <div>
    <ul>
      <!-- key 等于数组的唯一值 -->
      <li @click="onDelete(index)" v-for="(item, index) in list" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: ["苹果", "火龙果", "麻瓜"],
    };
  },
  methods: {
    onDelete(num) {
      // console.log("被点击拉执行删除");
      // 数组删除元素功能 数组api 方法

      // ['a','b','c'].splice(下标,要删除几个)
      // ['a','b','c'].splice(1,1)

      // 获取到data中的数组 list
      this.list.splice(num, 1);
    },
  },
};
</script>

<style></style>
